<template>
    <div id="#app">
        <el-menu background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :default-active="activeIndex"
                 router
                 class="nav el-menu-demo"
                 mode="horizontal">
            <el-menu-item :index="'/'||'/dapan'">大盘</el-menu-item>
            <el-menu-item index="/hold">持股</el-menu-item>
            <el-menu-item index="/config">配置</el-menu-item>
            <el-menu-item index="/news">新闻</el-menu-item>
            <el-menu-item index="/recording">条件单</el-menu-item>
        </el-menu>
        <router-view class="view"></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app',
        computed: {
            activeIndex() {
                return this.$route.path
            }
        }
    }
</script>

<style>
    .nav {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw !important;
        overflow: auto;
        z-index: 111;
        display: flex;
        justify-content: space-between;
    }

    .el-menu-item {
        padding-left: 0;
    }

    .view {
        position: relative;
        top: 60px;
        height: calc(100vh - 60px);
        min-height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
    }
</style>
